<script>
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import sheep from '@/sheep';

  export default {
    name: 'presentABouquet',
    components: { ImageAvater, UniPopup },
    computed: {
      FAMILY_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    props: {
      ct_light: {
        type: Array,
        default: () => {
          return [];
        },
      },
      ct_detail: {
        type: Object,
        default: () => {
          return {};
        },
      },
      cm_time: {
        type: String,
        default: () => {
          return '';
        },
      },
      diyInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    methods: {
      show() {
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
      async lighten(info) {
        let { status, msg } = await sheep.$api.genealogy.clickChangMingLamp({
          ancestral_id: this.ct_detail.id,
          d_id: info.id,
        });
        this.$emit('lighten');
        this.close();
        // if (status == 200) {
        //   this.$nav.showToastNone('点亮成功');
        //
        // } else {
        //   this.$nav.showToastNone(msg);
        // }
      },
      goVip() {
        this.$emit('goVip');
      },
      topUp() {
        sheep.$router.go('/pages/pay/recharge', { is_flag: 1 });
      },
    },
  };
</script>

<template>
  <view>
    <uni-popup ref="popup" type="bottom">
      <view class="flex flex-column align-center allList">
        <view class="presentABouquet flex align-center justify-between mt_25">
          <view class="left flex">
            当前元宝剩余：{{ diyInfo.score || 0 }}个
            <view class="color_FF4206 ml_12" @click.stop="topUp">去充值
              <text class="iconfont icon-ic_rightarrow fs_26"></text>
            </view>
          </view>
          <image :src="`${FAMILY_URL}/index/citang_icon.png`" @click.stop="close"></image>
        </view>
        <view class="header flex flex-column align-center justify-center">
          <view class="bg flex align-center justify-center">
            {{ cm_time }}
          </view>
          <view class="description mt_10">
            长明灯剩余时长
          </view>
        </view>
        <view class="list flex align-center justify-between mb_20" v-for="(item,index) in ct_light" :key="index">
          <view class="mt_12 mb_12 ml_12 left flex">
            <image-avater :src="item.image" width="84" height="84"
                          class="flex align-center justify-center"></image-avater>
            <view class="description ml-20">
              <view class="title">{{ `${item.title}` }}</view>
              <view class="content">{{ `点亮${item.duration}分钟` }}</view>
              <view class="content">消耗
                <text style="color: #FF4206;">{{ `${item.integral}元宝` }}</text>
              </view>
            </view>
          </view>
          <view class="mr_12 right flex align-center justify-center" @click.stop="lighten(item)">
            点亮
          </view>
        </view>
        <view class="tips flex align-center justify-center mt_20">
          <view class="left">
            温馨提示：开通会员可点亮长明灯
          </view>
          <view class="right ml_15" @click.stop="goVip">
            去开通>
          </view>
        </view>
        <view class="hW_50"></view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
  .allList {
    width: 750rpx;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    background: #FFFFFF;
    margin: 0 auto;
  }

  .presentABouquet {
    width: 702rpx;
    background: #FFFFFF;
    overflow: hidden;

    .left {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #A0A0A0;
    }

    image {
      width: 63rpx;
      height: 63rpx;
    }
  }

  .header {
    height: 155rpx;
    background: #FFFFFF;

    .bg {
      width: 278rpx;
      height: 62rpx;
      background: url($uni-bg-url + "/citang_titlebg.png") no-repeat;
      background-size: 100% 100%;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #FFFFFF;
    }

    .description {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #A7752A;
    }
  }

  .list {
    width: 702rpx;
    background: #F8F8F8;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .left {
      .description {
        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 27rpx;
          color: #292929;
        }

        .content {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #696969;
        }
      }
    }

    .right {
      width: 117rpx;
      height: 60rpx;
      background: #FF4206;
      border-radius: 50rpx 50rpx 50rpx 50rpx;
      border: 3rpx solid #E8C38A;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }

  .tips {
    width: 702rpx;

    .left {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #A0A0A0;
      white-space: nowrap;
    }

    .right {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #FF4206;
    }
  }
</style>